<template>
    <div>
        <h2>选项卡</h2>
        <div>
            <span @click="defaultCom=i.com" :class="defaultCom===i.com?'active':''" v-for="i in nav" :key="i.com">{{i.name}}</span>
        </div>
        <keep-alive>
            <components :is="defaultCom"></components>
        </keep-alive>
    </div>
</template>
<script>
import Hot from './hot.vue'
import Times from './times.vue'

export default {
    data(){
        return {
            nav:[{
                    com:'Hot',
                    name:'购物车'
                }
                ,
                {
                    com:'Times',
                    name:'改变msg'
                }],
            defaultCom:'Hot'
    
        }
    },
    components:{
        Hot,Times
    }
}
</script>
<style scoped>
.active{
    color: cornflowerblue;
}
</style>